import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';
import ECharts from 'echarts';

/*
  Generated class for the Chart page.

  See http://ionicframework.com/docs/v2/components/#navigation for more info on
  Ionic pages and navigation.
*/
@Component({
  selector: 'page-chart',
  templateUrl: 'chart.html'
})
export class ChartPage {

  constructor(public navCtrl: NavController, public navParams: NavParams) {}

  ionViewDidLoad() {
    console.log('ionViewDidLoad ChartPage');
    var myChart = ECharts.init(document.getElementById('main') as HTMLDivElement);
    // 指定图表的配置项和数据
    var option = {
      grid:{
        right:0,
        left:0
      },
      title: {
        text: 'ECharts 入门示例'
      },
      tooltip: {},
      legend: {
        show:false
      },
      xAxis: {
        data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
      },
      yAxis: {
        show:false
      },
      series: [{
        name: '销量',
        type: 'bar',
        barCategoryGap :'0%',
        data: [5, 20, 36, 10, 10, 20]
      }]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
  }

}
